Les fondations du Web spatial : une exploration approfondie des ancrages persistants WebXR

Imaginez placer un meuble virtuel dans votre salon à l'aide de votre smartphone. Vous l'ajustez, vous vous promenez autour et vous voyez comment il s'intègre. Imaginez maintenant que vous fermez le navigateur, et lorsque vous revenez demain, le meuble virtuel se trouve exactement là où vous l'avez laissé. Votre partenaire peut même ouvrir la même page Web sur son appareil et voir le même meuble au même endroit. C'est la magie de la persistance dans la réalité augmentée, et ce n'est plus le domaine exclusif des applications natives. Bienvenue dans le monde des ancrages persistants WebXR.

Pendant des années, la réalité augmentée basée sur le Web (WebAR) a été une expérience fascinante mais souvent éphémère. Les objets numériques apparaissaient, mais au moment où la session se terminait, ils disparaissaient dans l'éther numérique. Cela limitait WebAR à des campagnes marketing de courte durée ou à de simples démonstrations. Les ancrages persistants changent complètement ce paradigme. Il s'agit d'une technologie fondamentale qui permet de « sauvegarder » le contenu numérique dans le monde réel, créant ainsi des expériences multisessions significatives accessibles à toute personne disposant d'un navigateur Web.

Ce guide complet est destiné aux développeurs, aux chefs de produit et aux passionnés de technologie du monde entier. Nous explorerons ce que sont les ancrages persistants, comment ils fonctionnent, comment les implémenter à l'aide de l'API WebXR Device, et les applications incroyables qu'ils débloquent pour un Web véritablement mondial et immersif.

Que sont exactement les ancrages WebXR ?

Avant de nous plonger dans la persistance, clarifions ce qu'est un ancrage dans le contexte de XR (réalité étendue). Un ancrage est un point et une orientation spécifiques et fixes dans le monde réel qu'un système de suivi d'appareil peut surveiller. Considérez-le comme une punaise numérique que vous enfoncez dans un emplacement du monde réel.

Votre appareil compatible AR analyse constamment son environnement à l'aide de ses caméras et de ses capteurs, un processus souvent appelé SLAM (Simultaneous Localization and Mapping ; localisation et cartographie simultanées). Il identifie des points caractéristiques uniques (coins de meubles, motifs sur un mur, textures sur le sol) pour comprendre sa propre position et son orientation dans un espace. Un ancrage est un point lié à cette compréhension du monde. Lorsque vous vous déplacez, l'appareil met continuellement à jour la position de vos objets virtuels par rapport à l'ancrage, garantissant ainsi qu'ils apparaissent stables et fixes dans le monde réel.

Ancrages transitoires ou persistants : la principale différence

La distinction entre les types d'ancrages est essentielle pour comprendre leur puissance :

• Ancrages transitoires (basés sur la session) : ce sont les ancrages standard qui sont disponibles dans WebXR depuis un certain temps. Ils sont créés et existent uniquement pendant la durée d'une seule session XR. Lorsque l'utilisateur ferme l'onglet ou s'éloigne, l'ancrage et sa référence au monde réel sont perdus à jamais. Ils sont parfaits pour les expériences sur le moment, comme jouer à un jeu rapide sur une table.
• Ancrages persistants (intersessions) : c'est ce qui change la donne. Un ancrage persistant est un ancrage qui peut être enregistré par le navigateur et restauré dans une session future. L'appareil mémorise l'emplacement de l'ancrage par rapport au monde réel. Lorsque vous démarrez une nouvelle session AR dans le même espace physique, vous pouvez demander au navigateur de « charger » cet ancrage, et votre contenu virtuel réapparaîtra exactement là où vous l'avez laissé.

Analogie : un ancrage transitoire est comme écrire sur un tableau blanc qui est effacé à la fin de la journée. Un ancrage persistant est comme graver ces informations sur une plaque permanente fixée au mur.

Le « problème de la persistance » et pourquoi il est important pour un Web mondial

Le manque de persistance a été un obstacle fondamental à la création d'applications AR profondément utiles et attrayantes. Sans cela, chaque expérience est une affaire « à un coup », revenant à zéro à chaque fois. Cette limitation empêche le développement d'applications qui créent de la valeur au fil du temps.

Considérez ces scénarios qui étaient auparavant impossibles sur le Web :

• Conception collaborative : une équipe d'architecture à Tokyo et un client à Berlin souhaitent examiner un modèle 3D sur une table de salle de réunion physique. Sans persistance, ils devraient réaligner manuellement le modèle chaque fois qu'ils ouvrent l'application.
• Formation industrielle : un technicien doit laisser des instructions virtuelles sur une machine complexe pour le prochain ouvrier posté. Sans persistance, ces instructions disparaîtraient à la fin de la session du premier technicien.
• Espaces personnalisés : un utilisateur souhaite décorer sa maison avec de l'art virtuel. Il perdrait toutes ses œuvres d'art soigneusement placées chaque fois qu'il fermerait le navigateur.

Les ancrages persistants résolvent ce problème en créant un pont entre les sessions numériques, ancré dans le monde physique. Cela permet une nouvelle classe d'applications contextuelles, collaboratives et continues, formant les éléments constitutifs du « Web spatial » ou « Metaverse » : un monde où l'information numérique est intégrée de manière transparente à notre environnement physique.

Comment fonctionnent les ancrages persistants : un regard sous le capot

La technologie derrière les ancrages persistants est une merveille de vision par ordinateur et d'informatique spatiale. Bien que l'API masque une grande partie de la complexité, la compréhension des concepts de base est utile pour les développeurs.

1. Cartographie du monde : lorsque vous démarrez une session AR, votre appareil commence à créer une carte de son environnement. Ce n'est pas une carte photographique, mais un nuage de points caractéristiques uniques. Cette carte est une représentation mathématique de la géométrie de l'espace.
2. Création d'un ancrage : lorsque vous demandez à créer un ancrage à une certaine position, le système lie les coordonnées de cet ancrage à la carte de points caractéristiques sous-jacente.
3. Génération d'un UUID : pour un ancrage persistant, le système génère un identificateur universellement unique (UUID), une longue chaîne unique, qui agit comme l'ID permanent de l'ancrage. Cet UUID est transmis à votre application Web.
4. Enregistrement de l'UUID : il est de la responsabilité de votre application d'enregistrer cet UUID. Vous pouvez l'enregistrer dans le localStorage du navigateur pour une expérience utilisateur unique et unique, ou vous pouvez l'envoyer à un serveur pour le partager avec d'autres utilisateurs ou y accéder depuis d'autres appareils.
5. Relocalisation : lorsque vous démarrez une nouvelle session au même emplacement physique, l'appareil recommence à cartographier son environnement. Il compare la nouvelle carte aux cartes précédemment enregistrées. S'il trouve une correspondance, il se « relocalise » avec succès.
6. Restauration de l'ancrage : votre application fournit les UUID enregistrés à l'API WebXR. Si l'appareil s'est relocalisé avec succès dans la zone où cet ancrage a été créé, le système peut déterminer la position actuelle de l'ancrage et le restaurer pour que votre application puisse l'utiliser.

Une remarque sur la confidentialité : ce processus est conçu dans le respect de la confidentialité. Les cartes de points caractéristiques enregistrées par l'appareil sont des données abstraites, et non des images ou des vidéos lisibles de l'environnement de l'utilisateur. La spécification WebXR exige l'autorisation explicite de l'utilisateur pour utiliser des fonctionnalités telles que les ancrages, garantissant ainsi que l'utilisateur a toujours le contrôle.

Implémentation des ancrages persistants : un guide pratique pour les développeurs

Passons aux choses sérieuses. L'implémentation d'ancrages persistants implique quelques étapes clés dans le cycle de vie de l'API WebXR Device. Les exemples suivants utilisent JavaScript et supposent une connaissance de base de la configuration d'une session WebXR.

1. Détection des fonctionnalités et demande de session

Tout d'abord, vous devez demander la fonctionnalité « anchors » lorsque vous créez votre session XR. Il s'agit d'une fonctionnalité requise, ce qui signifie que la session ne démarrera pas si le navigateur ne la prend pas en charge.

            
async function activateXR() {
  // Check for WebXR support
  if (!navigator.xr) {
    console.error("WebXR is not available.");
    return;
  }

  // Request an immersive-ar session with the 'anchors' feature
  try {
    const session = await navigator.xr.requestSession('immersive-ar', {
      requiredFeatures: ['anchors']
    });
    
    // ... session setup ...
  } catch (error) {
    console.error("Failed to start AR session:", error);
  }
}

            

              
                Copy
              
            
          

2. Création et enregistrement d'un nouvel ancrage

Une fois votre session en cours d'exécution, vous pouvez créer un ancrage. Cela se fait généralement en réponse à une action de l'utilisateur, comme un appui sur l'écran. Vous effectuerez un test de collision pour trouver une surface du monde réel, puis vous créerez un ancrage à cette position.

            
// Inside your render loop or event handler
async function onSelect(event) {
  const frame = event.frame;
  const session = frame.session;

  // Create a hit test source
  const hitTestSource = await session.requestHitTestSource({ space: event.inputSource.targetRaySpace });
  const hitTestResults = frame.getHitTestResults(hitTestSource);

  if (hitTestResults.length > 0) {
    const hitPose = hitTestResults[0].getPose(xrReferenceSpace);

    try {
      // Create the anchor at the hit-tested position
      const anchor = await frame.createAnchor(hitPose.transform);
      console.log("Anchor created successfully.");

      // THE CRITICAL STEP: Store the anchor's UUID
      // The anchor object has a UUID if persistence is supported.
      if (anchor.anchorUUID) {
        saveAnchorUUID(anchor.anchorUUID);
      }

    } catch (error) {
      console.error("Could not create anchor:", error);
    }
  }
}

// Example function to save the UUID to localStorage
function saveAnchorUUID(uuid) {
  let savedAnchors = JSON.parse(localStorage.getItem('my-ar-app-anchors') || '[]');
  if (!savedAnchors.includes(uuid)) {
    savedAnchors.push(uuid);
    localStorage.setItem('my-ar-app-anchors', JSON.stringify(savedAnchors));
    console.log(`Saved anchor UUID: ${uuid}`);
  }
}

            

              
                Copy
              
            
          

3. Restauration des ancrages dans une nouvelle session

Lorsqu'une nouvelle session commence, votre première tâche consiste à charger vos UUID enregistrés et à demander au système de les restaurer. Le navigateur essaiera alors de les trouver dans l'environnement.

            
// When your session starts
async function onSessionStarted(session) {
  // ... other setup ...

  // Restore previously saved anchors
  await restoreSavedAnchors(session);
}

async function restoreSavedAnchors(session) {
  const savedAnchors = JSON.parse(localStorage.getItem('my-ar-app-anchors') || '[]');

  if (savedAnchors.length === 0) {
    console.log("No anchors to restore.");
    return;
  }

  console.log(`Attempting to restore ${savedAnchors.length} anchors...`);

  try {
    // The restoreAnchor method returns a promise that resolves when the anchor is found
    const restoredAnchors = await Promise.all(
      savedAnchors.map(uuid => session.restoreAnchor(uuid))
    );

    restoredAnchors.forEach(anchor => {
      if (anchor) {
        console.log(`Successfully restored anchor with UUID: ${anchor.anchorUUID}`);
        // Now you can attach your 3D model to this restored anchor
        add3DObjectToAnchor(anchor);
      }
    });

  } catch (error) {
    console.error("An error occurred while restoring anchors:", error);
  }
}

            

              
                Copy
              
            
          

4. Gestion et suppression des ancrages

Votre application doit également gérer la suppression des ancrages, à la fois de votre scène et de votre stockage persistant. La propriété trackedAnchors de la session est un Set qui contient tous les ancrages (nouvellement créés et restaurés) qui sont actuellement suivis.

            
// To delete an anchor
function deleteAnchor(anchor) {
  // Remove from persistent storage
  const uuid = anchor.anchorUUID;
  let savedAnchors = JSON.parse(localStorage.getItem('my-ar-app-anchors') || '[]');
  const index = savedAnchors.indexOf(uuid);
  if (index > -1) {
    savedAnchors.splice(index, 1);
    localStorage.setItem('my-ar-app-anchors', JSON.stringify(savedAnchors));
  }

  // Tell the system to stop tracking it
  anchor.delete();
  console.log(`Deleted anchor with UUID: ${uuid}`);
}

// You can iterate through all tracked anchors in your render loop
function render(time, frame) {
  for (const anchor of frame.session.trackedAnchors) {
    // Get the anchor's pose and update your 3D object's position
    const anchorPose = frame.getPose(anchor.anchorSpace, xrReferenceSpace);
    if (anchorPose) {
      // Update 3D model matrix
    }
  }
}

            

              
                Copy
              
            
          

Cas d'utilisation globaux et applications débloqués par la persistance

Les ancrages persistants font passer WebAR de la nouveauté à l'utilité, ouvrant des applications puissantes dans d'innombrables industries à travers le monde.

Commerce électronique et vente au détail

Les marques mondiales peuvent offrir des expériences « essayez avant d'acheter » qui persistent. Un utilisateur au Brésil peut placer un téléviseur virtuel d'une marque d'électronique coréenne sur son mur. Il peut fermer le navigateur, en discuter avec sa famille et le rouvrir plus tard pour le voir exactement au même endroit. Cela crée une expérience d'achat beaucoup plus convaincante et utile.

Solutions industrielles et d'entreprise

Un ingénieur de maintenance dans une usine automobile allemande peut utiliser une application Web pour placer des marqueurs numériques persistants sur une machine, indiquant les points qui nécessitent une réparation. Un technicien du prochain poste, peut-être un entrepreneur d'un autre pays qui parle une langue différente, peut ouvrir le même lien Web sur sa tablette et voir immédiatement les annotations AR parfaitement alignées sur l'équipement du monde réel, comblant ainsi les lacunes de communication et améliorant l'efficacité.

Architecture, ingénierie et construction (AIC)

Un cabinet d'architectes aux États-Unis peut partager un lien avec un client à Dubaï. Le client peut placer un modèle virtuel à l'échelle 1:1 du bâtiment proposé sur le chantier de construction réel. Le modèle persistera, ce qui lui permettra de le parcourir et de fournir des commentaires pendant plusieurs jours lors de l'examen des plans.

Navigation et orientation

Les grands lieux complexes comme les aéroports internationaux, les halls d'exposition ou les campus universitaires peuvent déployer une orientation AR persistante. Les visiteurs peuvent charger une page Web et voir un chemin virtuel persistant les guidant vers leur porte, leur stand ou leur salle de conférence. C'est beaucoup plus intuitif que d'essayer de suivre une carte 2D.

Éducation et culture

Les musées peuvent créer des expositions AR persistantes. Un visiteur pourrait pointer son téléphone sur un squelette de dinosaure et voir une couche persistante d'informations, d'animations et d'annotations qui restent en place lorsqu'il se promène autour. Les élèves d'une salle de classe pourraient disséquer en collaboration une grenouille virtuelle sur leur bureau, le modèle persistant pendant toute la durée de la leçon.

Art et divertissement

Les artistes peuvent créer des installations d'art numérique publiques liées à des lieux réels spécifiques. Les utilisateurs peuvent visiter un parc ou une place de la ville, ouvrir une URL et voir une sculpture virtuelle persistante. Les jeux multijoueurs peuvent avoir des éléments persistants avec lesquels les joueurs du monde entier peuvent interagir dans un espace physique partagé.

Défis et considérations pour un public mondial de développeurs

Bien que incroyablement puissant, le développement avec des ancrages persistants s'accompagne de son propre ensemble de défis que les développeurs doivent prendre en compte, en particulier lors de la création pour un public mondial.

• Prise en charge des navigateurs et des appareils : le module WebXR Anchors est une norme relativement nouvelle. La prise en charge n'est pas encore universelle. Actuellement, il est principalement disponible dans Chrome pour Android sur les appareils compatibles ARCore. Il est essentiel de vérifier la prise en charge des fonctionnalités et de mettre en œuvre une dégradation progressive pour les utilisateurs sur les navigateurs ou appareils non pris en charge (comme iOS). Votre expérience doit toujours être fonctionnelle, peut-être en revenant à un mode de visionneuse 3D.
• Conditions environnementales : la technologie SLAM sous-jacente repose sur des caractéristiques visuelles stables. La relocalisation peut échouer si l'environnement a considérablement changé entre les sessions. Des changements drastiques d'éclairage (jour et nuit), des meubles déplacés ou un manque de caractéristiques visuelles distinctes (un mur blanc uni) peuvent empêcher la restauration d'un ancrage. Les applications doivent être conçues pour gérer ces échecs de restauration avec élégance.
• Partage inter-appareils et multiplateforme : la norme WebXR garantit qu'un ancrage peut être restauré sur le même appareil. Elle ne résout pas, en soi, le problème du partage de l'emplacement d'un ancrage entre différents appareils (par exemple, un téléphone Android et un futur casque AR) ou plateformes (WebXR et une application iOS ARKit native). La résolution de ce problème « multi-utilisateurs, multi-appareils » nécessite généralement une couche de technologie supplémentaire, souvent appelée service AR Cloud, qui peut fusionner et aligner des cartes spatiales provenant de différentes sources.
• Confidentialité et consentement de l'utilisateur : en tant que développeurs, nous avons la responsabilité d'être transparents avec les utilisateurs. Étant donné que la RA persistante implique l'enregistrement de données sur l'environnement physique d'un utilisateur, il est essentiel d'expliquer clairement pourquoi vous avez besoin de l'autorisation « anchors » et comment les données seront utilisées. La confiance des utilisateurs est primordiale pour l'adoption de cette technologie.

L'avenir est persistant : quelle est la prochaine étape pour le Web immersif ?

Les ancrages persistants WebXR sont un grand pas en avant, mais ce n'est que le début. L'évolution du Web immersif s'oriente vers un avenir plus connecté et conscient du contexte.

Nous assistons à l'émergence de l'API géospatiale WebXR, qui permet de lier les ancrages à des coordonnées géographiques réelles (latitude, longitude, altitude). Cela permettra des expériences AR à grande échelle, à l'échelle de la ville, toutes basées sur des normes Web ouvertes.

De plus, le développement de plateformes AR Cloud fournira l'infrastructure backend nécessaire pour des expériences AR véritablement partagées, persistantes et multiplateformes. Ces plateformes géreront la tâche difficile d'aligner les cartes spatiales de millions d'appareils différents, créant ainsi un jumeau numérique unique et partagé du monde réel.

La combinaison de ces technologies indique un avenir où le Web se libère de l'écran 2D. Il deviendra une couche spatiale d'informations, de divertissement et d'utilité avec laquelle nous pourrons interagir naturellement dans notre environnement physique. Les ancrages persistants sont l'élément essentiel et fondamental qui rend cette vision possible.

Conclusion : commencez à construire le Web persistant dès aujourd'hui

Les ancrages persistants WebXR sont plus qu'une simple nouvelle API ; ils représentent un changement fondamental dans ce qui est possible sur le Web. Ils permettent aux développeurs de créer des applications AR avec de la mémoire, du contexte et une valeur durable. De la transformation de la façon dont nous achetons, travaillons et apprenons à la création de nouvelles formes d'art et de divertissement, le potentiel est immense.

La barrière à l'entrée n'a jamais été aussi basse. Avec un smartphone moderne et un navigateur Web, les développeurs du monde entier peuvent commencer à expérimenter la création d'expériences persistantes et conscientes du monde. Le voyage vers un Web spatial véritablement immersif est en cours, et il est basé sur des normes ouvertes, accessibles à tous. Le moment de commencer à construire est venu.